<template>
  <div class="inquiry-details">
    <p class="number">询价编号：{{ info.code }}</p>
    <div class="title">
      <img src="~/assets/images/inquiry-company.png" alt="" />
      {{ info.mer_info.mer_name }}
    </div>

    <!-- 商家报价详情 -->
    <div class="offer">
      <div class="title">商家报价详情</div>
      <Table class="table-head">
        <table-column label="产品名称" align="center" width="280" />
        <table-column label="产品数量" align="center" />
        <table-column label="单位" align="center" />
        <table-column label="商家报价" align="center" />
        <table-column label="操作" align="center" />
      </Table>
      <Table :data="info.product" :show-header="false">
        <table-column prop="name" label="产品名称" align="center" width="280">
          <template v-slot="{ row }">
            <div class="table-name">
              <img :src="row.product && row.product.image" alt="" class="pic" />
              <p class="name">{{ row.product && row.product.store_name }}</p>
            </div>
          </template>
        </table-column>
        <table-column prop="number" label="产品数量" align="center">
          <template v-slot="{ row }">
            <div class="table-quantity">
              <div class="inputTxt">{{ row.num }}</div>
            </div>
          </template>
        </table-column>
        <table-column prop="unit" label="单位" align="center">
          <template v-slot="{ row }">
            <div class="table-unit">
              <div class="inputTxt">{{ row.unit_name }}</div>
            </div>
          </template>
        </table-column>
        <table-column prop="price" label="商家报价" align="center">
          <template v-slot="{ row }">
            <div class="table-price">¥{{ row.b_price }}</div>
          </template>
        </table-column>
        <table-column prop="operation" label="操作" align="center">
          <template v-slot="{ row }">
            <div class="table-operation">
              <m-button width="87" @click="goDetail(row)">去购买</m-button>
            </div>
          </template>
        </table-column>
      </Table>
      <div class="mbt30" v-for="(item, index) in info.ac" :key="index">
        <div class="merReply" v-if="item.type == 2">
          <div class="remarks-title">商家回复：{{item.create_time}}</div>
          <div class="replyBox f14 cor666">
            {{ item.content }}
          </div>
        </div>
        <div class="mineReply" v-else>
          <div class="remarks-title">我的回复：{{item.create_time}}</div>
          <div class="replyBox f14 cor666">
            {{ item.content }}
          </div>
        </div>
      </div>

      <div class="btns">
        <m-button
          width="96"
          type="bordered"
          style="margin-right: 10px"
          @click="reply"
          class="replyBtn"
          >回复</m-button>
        <m-button width="123" @click="handleAllBuy">全部购买</m-button>
      </div>
    </div>

    <!-- 询价信息 -->
    <div class="inquiry">
      <div class="title">询价信息</div>
      <Table class="table-head">
        <table-column label="产品名称" align="center" width="330" />
        <table-column label="产品数量" align="center" />
        <table-column label="单位" align="center" />
      </Table>
      <Table :data="info.product" :show-header="false">
        <table-column prop="name" label="产品名称" align="center" width="330">
          <template v-slot="{ row }">
            <div class="table-name">
              <img :src="row.product && row.product.image" alt="" class="pic" />
              <p class="name">{{ row.product && row.product.store_name }}</p>
            </div>
          </template>
        </table-column>
        <table-column prop="number" label="产品数量" align="center">
          <template v-slot="{ row }">
            <div class="table-quantity">
              <div class="inputTxt">{{ row.num }}</div>
            </div>
          </template>
        </table-column>
        <table-column prop="unit" label="单位" align="center">
          <template v-slot="{ row }">
            <div class="table-unit">
              <div class="inputTxt">{{ row.unit_name }}</div>
            </div>
          </template>
        </table-column>
      </Table>
      <m-form
        ref="form"
        :model="formData"
        style="margin-top: 50px"
        label-width="100px"
        label-position="left"
      >
        <m-form-item prop="email" label="产品附件：">
          <div class="annex-list">
            <div
              class="annex"
              v-for="(item, index) in info.file_url"
              :key="index"
            >
              <img src="~/assets/images/pdf-icon.png" alt="" class="pic" />
              <div class="name">{{ item.name }}</div>
            </div>
          </div>
        </m-form-item>
        <m-form-item prop="email" label="备注：">
          <div class="">{{ info.content }}</div>
        </m-form-item>
        <m-form-item prop="date" label="发布时间：">
          <p style="font-size: 16px; color: #666">{{ info.create_time }}</p>
        </m-form-item>
      </m-form>
    </div>

    <m-dialog :show-dialog.sync="showDialog" title="回复商家" class="reply-dialog">
      <p class="title">请填写回复内容：</p>
      <m-input
        type="textarea"
        :autosize="{ minRows: 6 }"
        v-model="replyContent"
        @blur="blurRe"
      />
      <div class="msg f14" v-if="isMsg">请填写内容</div>
      <div style="display: flex; justify-content: center" class="mtp30">
        <m-button width="210" @click="replySubmit">提交</m-button>
      </div>
    </m-dialog>
  </div>
</template>

<script>
import MInput from "@/components/common/m-input/MInput"
import MButton from "@/components/common/m-button/MButton"
import MForm from "@/components/common/m-form/MForm"
import MFormItem from "@/components/common/m-form/MFormItem"
import MDialog from "@/components/common/m-dialog/MDialog"
import { Table, TableColumn } from "element-ui"
import { MyInquiryDe, postReply, addCart } from "@/request/api"

export default {
  name: "InquiryDetails",
  components: {
    MDialog,
    MFormItem,
    MForm,
    MButton,
    MInput,
    Table,
    TableColumn
  },
  data() {
    return {
      id: "",
      info: {
        mer_info: ""
      },
      offerData: [],
      inquiryData: [],
      formData: {},
      showDialog: false,
      replyContent: "",
      isMsg: false,
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getInfo()
  },
  methods: {
    goDetail(row) {
      const id = row.product.product_id
      const num = row.num
      const params = {
        cart_num: num,
        is_new: 1,
        product_id: id,
        product_type: 0
      }
      addCart(params).then(res => {
         this.$router.push(`/category/order?cart_id=${res.data.cart_id}&is_cart=0`)
        })
    },
    reply() {
      this.showDialog = true
    },
    getInfo() {
      let that = this
      MyInquiryDe(this.id).then((res) => {
        if (res.status === 200) {
          res.data.file_url = that.$common.stringToArr(res.data.file_url)
          that.info = res.data
        }
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    blurRe() {
      if (this.replyContent) {
        this.isMsg = false
      }
    },
    replySubmit() {
      let that = this
      if (!this.replyContent) {
        this.isMsg = true
        return false
      } else {
        let data = {
          inquiry_id: this.id,
          content: this.replyContent
        }
        this.$toastVant.loading("提交中")
        postReply(data).then((res) => {
          if (res.status === 200) {
            this.showDialog = false
            this.replyContent = ""
            this.getInfo()
            that.$toastVant.success("回复成功!")
          }
        }).catch(err => {
          this.showDialog = false
          this.$message.error(err.message)
        })
      }
    },
    /** 全部购买 */
    handleAllBuy() {
      const ids = []
      this.info.product.map(item => {
        ids.push(item.id)
      })
      console.log(ids);
      this.$router.push(`/category/order?cart_id=${String(ids)}&is_cart=1`)
    },
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.inquiry-details {
  margin-top: 20px;
  font-size: 16px;
  color: #666;

  .number {
    margin-bottom: 20px;
  }
  .inputTxt,
  .inputTxt2 {
    background-color: #f3f4f8;
    border-radius: 10px;
    border: 1px solid #e9e9e9;
    width: 118px;
    height: 45px;
    color: #666;
    line-height: 43px;
    margin: 0 auto;
  }
  .inputTxt2 {
    width: 300px;
    margin: 0;
    padding: 0 10px;
  }
  .replyBox {
    background-color: #f3f4f8;
    border-radius: 10px;
    border-color: #e9e9e9;
    padding: 20px;
  }
  > .title {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 30px;

    img {
      margin-right: 15px;
    }
  }
  .msg {
    color: red;
    padding-top: 10px;
  }
  .table-head {
    background-color: #f3f4f7;

    /deep/ .el-table__body-wrapper {
      height: 0;
    }

    /deep/ th {
      color: #666;
      background-color: #f3f4f7;
    }
  }

  .offer {
    margin-bottom: 50px;

    .title {
      width: 140px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background-color: $theme-color-1;
      color: #fff;
    }

    .table-name {
      display: flex;
      align-items: center;

      .pic {
        width: 140px;
        height: 140px;
        margin-right: 15px;
      }
    }

    .table-operation {
      display: flex;
      justify-content: center;
    }

    .remarks-title {
      margin-top: 30px;
      margin-bottom: 20px;
    }
    .mineReply .replyBox {
      background: #fff7ec;
      border-color: #ffefd9;
    }
    .btns {
      margin-top: 30px;
      display: flex;
      justify-content: flex-end;
      /deep/ .replyBtn .el-button {
        background: #fff !important;
      }
    }
  }

  .inquiry {
    .title {
      width: 149px;
      height: 48px;
      line-height: 48px;
      text-align: center;
      background-color: $theme-color-1;
      color: #fff;
    }

    .table-name {
      display: flex;
      align-items: center;

      .pic {
        width: 140px;
        height: 140px;
        margin-right: 15px;
      }
    }

    .annex-list {
      display: flex;
      align-items: center;

      .annex {
        width: 80px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .pic {
          width: 34px;
          height: 34px;
        }

        .name {
          font-size: 14px;
          @include text-omitted();
        }
      }
    }
  }

  .reply-dialog {
    .title {
      margin-bottom: 15px;
      font-size: 16px;
      color: #666;
    }
  }
}
</style>
